import { Component, useState, useEffect } from 'react';

function Counter() {

  const [count, setCount] = useState(0);

  const countUp = () => {
    setCount(count + 1);
  }

  // 模拟 class 组件的 DidMount 和 DidUpdate
  // useEffect(() => {
  //   console.log('加载完了');
  // });

  // 模拟 class 组件的 DidMount
  // useEffect(() => {
  //   console.log('挂载完成');
  // }, []); // 第二个参数就是依赖的 state

  // 模拟 class 组件的 DidUpdate
  useEffect(() => {
    console.log('更新完成');
  }, [count]); // 第二个参数就是依赖的 state

  useEffect(() => {
    console.log('挂载完成');
    return () => {
      console.log('准备卸载')
    };
  }, []);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={countUp}>Click me</button>
    </div>
  ); 
}

// class Counter extends Component {
//   constructor(props) {
//     super(props);

//     this.state = {
//       count: 1
//     }
//   }

//   componentDidMount() {
//     console.log('CountDown componentDidMount');
//   }

//   componentDidUpdate() {
//     console.log('CountDown componentDidUpdate');
//   }

//   componentWillUnmount() {
//     console.log('CountDown componentWillUnmount');
//   }


//   setCount = () => {
//     this.setState({
//       count: this.state.count + 1
//     })
//   }
//   render() {
//     return (
//       <div>
//         <p>{this.state.count}</p>
//         <button onClick={this.setCount}>add</button>
//       </div>
//     )
//   }
// }

export default Counter;